<template>
	<view>
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item label="所在党支部" required labelWidth="90px">
					<uni-easyinput v-model="baseFormData.org" placeholder="请输入所在党支部" />
				</uni-forms-item>
				<uni-forms-item label="姓名" required labelWidth="90px">
					<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="申请理由" labelWidth="90px">
					<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入申请理由" />
				</uni-forms-item>
				<uni-forms-item label="日期时间" labelWidth="90px">
					<uni-datetime-picker type="datetime" return-type="timestamp"
						v-model="baseFormData.datetimesingle" />
				</uni-forms-item>
				<uni-forms-item label="转出党支部" labelWidth="90px">
					<view class="cascade">
						<picker mode="multiSelector" @change="bindPickerChange" @columnchange="columnchange" :value="index" :range="array"
							 range-key="baseFormData.title">
							<view class="uni-input">{{baseFormData.title}}</view>
						</picker>
						<text class="other" v-if="baseFormData.title!=='请选择'" @click="clear">x</text>
					</view>
				</uni-forms-item>
				<uni-forms-item label="证明材料" labelWidth="90px">
					<view class="img-box flex flex-wrap">
						<view class="img" v-for="(item, index) in baseFormData.imgList">
							<image class="pic" :src="item" mode="aspectFill" @click="lookImg(index)"></image>
							<image @click="delImg(index)" class="close" src="/static/images/close.png" mode="aspectFill"></image>
						</view>
						<!-- 上传按钮 -->
						<view class="img upload flex-center" @click="uploadImg"><image class="add-pic" src="/static/images//upload.png" mode="aspectFill"></image></view>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="button-group">
				<button type="warn" size="mini" @click="reset">重置</button>
				<button type="primary" size="mini" @click="submit('dynamicForm')">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "application",
		data() {
			return {
				baseFormData: {
					org:'',
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399,
					title: '请选择',
					imgList: [],//图片
				},
				index: [0, 0],
				array: [
					['第一社区', '第二社区', '第三社区', '第四社区']
				],
				childArr: [
					['第一党支部', '第二党支部', '第仨党支部'],
					['小妹', '小红', '第仨党支部'],
					['第一党支部', '第二党支部', '第仨党支部']
				], // 二级分类数据源
				imgMaxNum:9
				// title: '请选择',
				// imgList: [],//图片
			};
		},
		methods: {
			onSubmit(values) {
				console.log('submit', values);
			},
			// 任务分类
			getCate() {
				this.Get('请求的接口地址').then((res) => {
					if (!res.err) {
						// 返回的数据格式
						// [
						// {id: 4, title: "悬赏", desc: "", child: [{id: 10, title: "现金悬赏", desc: ""}]}
						// ]
						// 一级分类的数据源
						this.array[0] = res.result
						// 将数据源中的二级分类 push 进 childArr，作为二级分类的数据源
						this.childArr = res.result.map((item) => item.child)
						// 第一次打开时，默认给一级分类添加它的二级分类
						this.array[1] = this.childArr[0]
					}
				})
			},
			// 获取二级分类
			columnchange(e) {
				// 当滚动切换一级分类时，为当前的一级分类添加它的子类
				if (e.detail.column == 0) {
					// #ifdef H5
					// 在小程序中直接赋值无效  H5 可直接赋值
					this.array[1] = this.childArr[e.detail.value]
					// #endif
					// #ifdef MP-WEIXIN
					// 在 H5 环境下 $set 会导致一级分类无法滚动， 小程序正常运行
					this.$set(this.array, 1, this.childArr[e.detail.value])
					// #endif
				}
			},
			
			// 选择任务分类
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				let value = e.target.value;
				this.index = value;
				console.log(this.index);
				if (this.array[0].length != 0) {
					this.baseFormData.title = this.array[0][this.index[0]]
				};
				if (this.array[1].length != 0) {
					this.baseFormData.title += ' / ' + this.array[1][this.index[1]]
				}
			
			},
			// 清空级联选项
			clear(){
				this.baseFormData.title='请选择'
			},
			// 重置表单
			reset(){
				
			},
			//上传图片
				uploadImg: function() {
					let that = this;
					uni.chooseImage({
						count: 9, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: function(res) {
							var tempFilePaths = res.tempFilePaths;
							if (that.baseFormData.imgList.length + tempFilePaths.length > that.imgMaxNum) {
								uni.showToast({
									title: '超过上传图片的最大数量',
									icon: 'none'
								});
							} else {
								if (that.baseFormData.imgList.length != 0) {
									that.baseFormData.imgList = that.baseFormData.imgList.concat(res.tempFilePaths);
								} else {
									that.baseFormData.imgList = res.tempFilePaths;;
								}
							}
						}
					});
				},
				// 查看图片
				lookImg: function(val) {
					const urls = this.baseFormData.imgList;
					const current = val;
					uni.previewImage({
						urls,
						current
					});
				},
				// 删除图片
				delImg: function(index) {
					this.baseFormData.imgList.splice(index, 1);
				},
		
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
	
	.cascade{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
		border: 2px solid #efefef;
		border-radius: 10px;
	}
	.other{
		
		width: 18px;
		height: 18px;
		border-radius: 18px;
		background-color: #b6b6b6;
		color: #ffffff;
		font-size: 12px;
		line-height: 18px;
		text-align: center;
	}
	
	.img-box {
		.img {
			width: 200rpx;
			height: 200rpx;
			position: relative;
			margin-left: 20rpx;
			margin-top: 20rpx;
	
			&:nth-child(3n + 1) {
				margin-left: 0;
			}
	
			.pic {
				width: 100%;
				height: 100%;
			}
	
			.close {
				width: 38rpx;
				height: 38rpx;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}
	
		.upload {
			background-color: #f6f6f6;
	
			.add-pic {
				// width: 100rpx;
				// height: 100rpx;
				width: 100%;
				height: 100%;
			}
		}
	}

</style>
